import React from 'react';
import {LIST_VIEW, CHART_VIEW} from '../utility';
import PropTypes from 'prop-types'

const generateLinkClass = (current, view) => {
    return (current === view) ? 'nav-link active' : 'nav-link'
}
const ViewTab = ({activeTab, onTabChange}) => {
    return (
        <ul className="nav nav-pills nav-justified">
            <li className="nav-item col-md-6">
                <span
                    className={generateLinkClass(activeTab, LIST_VIEW)}
                    onClick={(event) => {
                        onTabChange(LIST_VIEW)
                    }}
                >
                    <svg
                        className="icon rounded-circle"
                        aria-hidden="true"

                        style={{backgroundColor: '#007bff', padding: '5px', fill: '#fff', fontSize: '30px'}}
                    >
                        <use xlinkHref="#icon-weibiaoti--"></use>
                    </svg>
                    列表模式
                </span>
            </li>
            <li className="nav-item col-md-6">
                <span
                    className={generateLinkClass(activeTab, CHART_VIEW)}
                    onClick={(event) => {
                        onTabChange(CHART_VIEW)
                    }}
                >
                    <svg
                        className="icon rounded-circle"
                        aria-hidden="true"

                        style={{backgroundColor: '#007bff', padding: '5px', fill: '#fff', fontSize: '30px'}}
                    >
                        <use xlinkHref="#icon-weibiaoti--"></use>
                    </svg>
                    图表模式
                </span>
            </li>
        </ul>
    )
}

ViewTab.propTypes = {
    activeTab: PropTypes.string.isRequired,
    onTabChange: PropTypes.func.isRequired,
}

export default ViewTab;